<template>
  <div class="page-box">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
          <ren-dept-tree style="width: 100%" v-model="dataForm.deptId" placeholder="选择线路" :query="true"></ren-dept-tree>
      </el-form-item>
      <el-form-item>
          <el-input v-model="dataForm.name" placeholder="名称"></el-input>
      </el-form-item>

      <!--      <el-form-item>-->
      <!--          <el-input v-model="dataForm.no" placeholder="编号"></el-input>-->
      <!--      </el-form-item>-->

      <el-form-item>
        <ren-select v-model="dataForm.isOnline" dict-type="is_online" placeholder="是否在线"
                    clearable></ren-select>
      </el-form-item>

      <el-form-item>
          <p class="handel-p">
            <el-form-item>
              <el-button type="primary" plain @click="addform('')">{{ $t("add") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
          </p>
      </el-form-item>
    </el-form>
    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%" :max-height="tableHeight" :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="deptName" label="线路" header-align="center" align="center"></el-table-column>
      <!--      <el-table-column prop="no" label="编号" header-align="center" align="center"></el-table-column>-->
      <el-table-column prop="cmdId" label="监测装置编码" header-align="center" align="center"></el-table-column>
      <el-table-column prop="imageId" label="图像装置编码" header-align="center" align="center"></el-table-column>
      <el-table-column prop="smartEquipName" label="装置名称" header-align="center" align="center"></el-table-column>
      <el-table-column prop="model" label="装置型号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="dataTransProtocolVersion" label="规约版本号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="essentialInfoVersion" label="版本号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="bsManufacturer" label="生产厂家" header-align="center" align="center"></el-table-column>
      <el-table-column prop="bsProductionDate" label="生产日期" header-align="center" align="center"></el-table-column>
      <el-table-column prop="bsIdentifier" label="出厂编号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="isOnline" label="是否在线" header-align="center" align="center">
        <template v-slot="scope">
          {{ getDictLabel("is_online", scope.row.isOnline) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="primary" link @click="addform(scope.row.id)">{{ $t("update") }}</el-button>
          <el-button type="danger" link @click="deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                   layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                   @current-change="pageCurrentChangeHandle"></el-pagination>
  </div>


  <AddForm ref="addform" @refreshDataList="getDataList()"></AddForm>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import { tableRowClassName } from "@/utils/tableRowClassName";
import AddForm from "@/views/kxstation/addForm.vue";

export default defineComponent({
  components:{
    AddForm
  },
  setup() {
    const state = reactive({
      tableRowClassName,
      getDataListURL: "/KxStation/kxstation/page",
      getDataListIsPage: true,
      exportURL: "/KxStation/kxstation/export",
      deleteURL: "/KxStation/kxstation",
      deleteIsBatch: true,
      pictureDate: [] as any,
      dataForm: {
        name: "",
        no: "",
        deptId: ""
      } as any,
      visible: false,
      id: "",
      tableHeight: 0,
      dataList: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  created() {
  },
  mounted() {
    this.tableHeight = window.innerHeight - 200;
  },
  watch: {
    pictureDate: {
      handler(val) {
        if (val === null) {
          this.dataForm.startTime = "";
          this.dataForm.endTime = "";
        } else {
          this.dataForm.startTime = val[0];
          this.dataForm.endTime = val[1];
        }
      },
      deep: true
    }
  },
  methods: {
    addform(id: string) {
      this.$refs.addform.init(id)
    },
    close() {
        this.getDataList();
    },
    amendHandle(id: string) {
      this.id = id;
      this.visible = true;
    },
    addList() {
      this.id = "";
      this.visible = true;
    }
  }
});
</script>
